<!DOCTYPE HTML>
<html lang="en-US" >
    
    <head>
        
        <meta charset="UTF-8">
        <title>添加加号按钮 | 新浪微博开发笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 1.0.3">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
        
    
    
    
    <link rel="next" href="./createproject-04-summary.html" />
    
    
    <link rel="prev" href="./variablestype.html" />
    

        
    </head>
    <body>
        
        
<link rel="stylesheet" href="gitbook/style.css">


        
    <div class="book"  data-level="0.3.3" data-basepath="." data-revision="1441588137619">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
    	
    	
    	

        

        
    
        
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="./index.html">
                        <i class="fa fa-check"></i>
                        
                         新浪微博笔记
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.1" data-path="oschina.html">
            
                
                    <a href="./oschina.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.</b>
                        
                         项目部署
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.2" data-path="imagesassets.html">
            
                
                    <a href="./imagesassets.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.</b>
                        
                         图片素材
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.2.1" data-path="imagesassets-01-icon_default.html">
            
                
                    <a href="./imagesassets-01-icon_default.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.1.</b>
                        
                         图标&amp;启动图片
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.3" data-path="createproject.html">
            
                
                    <a href="./createproject.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.</b>
                        
                         项目搭建
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.3.1" data-path="createproject-01-createfiles.html">
            
                
                    <a href="./createproject-01-createfiles.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.1.</b>
                        
                         创建文件
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.2" data-path="createproject-02-addchildcontrollers.html">
            
                
                    <a href="./createproject-02-addchildcontrollers.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.2.</b>
                        
                         添加子控制器
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.3.2.1" data-path="throw_catch.html">
            
                
                    <a href="./throw_catch.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.2.1.</b>
                        
                         throw catch
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.2.2" data-path="variablestype.html">
            
                
                    <a href="./variablestype.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.2.2.</b>
                        
                         变量类型推导
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter active" data-level="0.3.3" data-path="createproject-03-costommaintabbar.html">
            
                
                    <a href="./createproject-03-costommaintabbar.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.3.</b>
                        
                         添加加号按钮
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.4" data-path="createproject-04-summary.html">
            
                
                    <a href="./createproject-04-summary.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.4.</b>
                        
                         阶段性小结
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.4" data-path="visitor.html">
            
                
                    <a href="./visitor.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.</b>
                        
                         未登录页面处理
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.4.1" data-path="visitor-01-basetableviewcontroller.html">
            
                
                    <a href="./visitor-01-basetableviewcontroller.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.1.</b>
                        
                         表格视图控制器基类
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.2" data-path="visitor-02-userloginview.html">
            
                
                    <a href="./visitor-02-userloginview.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.2.</b>
                        
                         用户登录视图
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.3" data-path="visitor-03-loginlogic.html">
            
                
                    <a href="./visitor-03-loginlogic.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.3.</b>
                        
                         设置未登录信息
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.4" data-path="visitor-04-homeanimation.html">
            
                
                    <a href="./visitor-04-homeanimation.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.4.</b>
                        
                         首页动画
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.5" data-path="visitor-05-logindelegate.html">
            
                
                    <a href="./visitor-05-logindelegate.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.5.</b>
                        
                         登录&amp;注册代理回调
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.6" data-path="visitor-06-setupappearance.html">
            
                
                    <a href="./visitor-06-setupappearance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.6.</b>
                        
                         设置全局外观
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.7" data-path="visitor-07-summary.html">
            
                
                    <a href="./visitor-07-summary.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.7.</b>
                        
                         阶段性小结
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.5" data-path="code_review.html">
            
                
                    <a href="./code_review.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.</b>
                        
                         代码评审(Code Review)
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">Twitter</button>
                <button type="button" data-sharing="google-plus" class="button">Google</button>
                <button type="button" data-sharing="facebook" class="button">Facebook</button>
                <button type="button" data-sharing="weibo" class="button">Weibo</button>
                <button type="button" data-sharing="instapaper" class="button">Instapaper</button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
    
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="./" >新浪微博开发笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-gitbook_26">
                    
                        <h1 id="-tabbar">自定义 TabBar</h1>
<h2 id="">功能需求</h2>
<ul>
<li>在 4 个控制器切换按钮中间增加一个撰写按钮</li>
<li>点击撰写按钮能够弹出对话框撰写微博</li>
</ul>
<h3 id="">需求分析</h3>
<ul>
<li>添加占位控制器</li>
<li>计算控制器按钮位置，在中间添加一个 <code>撰写</code> 按钮</li>
</ul>
<h3 id="">添加占位控制器</h3>
<pre><code class="lang-swift">    <span class="hljs-comment">/**
    添加所有子控制
    */</span>
    private <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">addChildViewControllers</span><span class="hljs-params">()</span>
    </span>{
        addChildViewController(<span class="hljs-type">HomeTableViewController</span>(), title: <span class="hljs-string">"首页"</span>, imageName: <span class="hljs-string">"tabbar_home"</span>)
        addChildViewController(<span class="hljs-type">MessageTableViewController</span>(), title: <span class="hljs-string">"消息"</span>, imageName: <span class="hljs-string">"tabbar_message_center"</span>)
        <span class="hljs-comment">// 添加一个占位的控制器</span>
        addChildViewController(<span class="hljs-type">UIViewController</span>())
        addChildViewController(<span class="hljs-type">DiscoverTableViewController</span>(), title: <span class="hljs-string">"发现"</span>, imageName: <span class="hljs-string">"tabbar_discover"</span>)
        addChildViewController(<span class="hljs-type">ProfileTableViewController</span>(), title: <span class="hljs-string">"我"</span>, imageName: <span class="hljs-string">"tabbar_profile"</span>)
    }
</code></pre>
<h3 id="">撰写按钮懒加载</h3>
<pre><code class="lang-swift"><span class="hljs-comment">/// 撰写按钮</span>
    lazy private <span class="hljs-keyword">var</span> composeButton:<span class="hljs-type">UIButton</span> = {
        <span class="hljs-comment">// 1.创建按钮</span>
        <span class="hljs-keyword">let</span> button = <span class="hljs-type">UIButton</span>()
        <span class="hljs-comment">// 2.设置图片</span>
        button.setImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_icon_add"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Normal</span>)
        button.setImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_icon_add_highlighted"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Highlighted</span>)
        <span class="hljs-comment">// 3.设置背景图片</span>
        button.setBackgroundImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_button"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Normal</span>)
        button.setBackgroundImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_button_highlighted"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Highlighted</span>)
        <span class="hljs-comment">// 5.添加到tabBar上</span>
        <span class="hljs-comment">// Swift中能不写self就不写self, 在闭包中必须写self</span>
        <span class="hljs-keyword">self</span>.tabBar.addSubview(button)
        <span class="hljs-comment">// 6.返回按钮</span>
        <span class="hljs-keyword">return</span> button
    }()
</code></pre>
<ul>
<li>先测试代码的可行性，再来细化 UI</li>
<li>懒加载的代码是一个闭包，因此在代码内部需要使用 <code>self.</code></li>
</ul>
<h3 id="">调整界面布局</h3>
<ul>
<li>在 <code>MainViewController</code> 中添加以下代码，并且增加断点</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span> </span>{
    <span class="hljs-keyword">super</span>.viewDidLoad()

    addChildViewControllers()

    <span class="hljs-comment">// The tab bar view associated with this controller. (read-only)</span>
    <span class="hljs-built_in">print</span>(tabBar)
    <span class="hljs-built_in">print</span>(tabBar.items)
}

<span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">viewWillAppear</span><span class="hljs-params">(animated: Bool)</span> </span>{
    <span class="hljs-keyword">super</span>.viewWillAppear(animated)

    <span class="hljs-built_in">print</span>(<span class="hljs-keyword">__FUNCTION__</span>)
    <span class="hljs-built_in">print</span>(tabBar.items)
}
</code></pre>
<ul>
<li><p>运行测试，通过调用堆栈观察可以发现</p>
</li>
<li><p>viewDidLoad 方法调用是实例化控制器方法触发的</p>
</li>
</ul>
<p><img src="images/TabBar/viewdidload调用.png" alt=""></p>
<ul>
<li><p>此时只是创建子控制器，而由于界面还没有显示，按照 iOS 开发的延迟创建原则，tabBar 中的 items 还没有被创建</p>
</li>
<li><p>viewWillAppear 方法是由 <code>makeKeyAndVisible</code> 方法触发的
<img src="images/TabBar/viewwillappear调用.png" alt=""></p>
</li>
<li><p>此时需要开始准备将控制器的子视图添加到界面上，因此 tabBar 中的 items 已经被创建</p>
</li>
<li><p>因此可以考虑在 viewWillAppear 方法中 计算加号按钮位置</p>
</li>
</ul>
<h3 id="--">计算 <code>撰写按钮</code> 的位置</h3>
<pre><code class="lang-swift">    <span class="hljs-comment">/**
    设置加号按钮位置
    */</span>
    private <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">setupComposeButton</span><span class="hljs-params">()</span>
    </span>{
        <span class="hljs-comment">// 1.计算按钮宽度</span>
        <span class="hljs-keyword">let</span> width = tabBar.bounds.width / <span class="hljs-type">CGFloat</span>(viewControllers!.<span class="hljs-built_in">count</span>)
        <span class="hljs-comment">// 2.创建按钮frame</span>
        <span class="hljs-keyword">let</span> rect = <span class="hljs-type">CGRect</span>(x: <span class="hljs-number">0</span>, y: <span class="hljs-number">0</span>, width: width, height: tabBar.bounds.height)
        <span class="hljs-comment">// 3.设置按钮frame和偏移位</span>
        composeButton.frame = <span class="hljs-type">CGRectOffset</span>(rect, <span class="hljs-number">2</span> * width, <span class="hljs-number">0</span>)
    }
</code></pre>
<h3 id="">撰写按钮点击处理</h3>
<pre><code class="lang-swift">    lazy private <span class="hljs-keyword">var</span> composeButton:<span class="hljs-type">UIButton</span> = {
        <span class="hljs-comment">// 1.创建按钮</span>
        <span class="hljs-keyword">let</span> button = <span class="hljs-type">UIButton</span>()
        <span class="hljs-comment">// 2.设置图片</span>
        button.setImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_icon_add"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Normal</span>)
        button.setImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_icon_add_highlighted"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Highlighted</span>)
        <span class="hljs-comment">// 3.设置背景图片</span>
        button.setBackgroundImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_button"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Normal</span>)
        button.setBackgroundImage(<span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"tabbar_compose_button_highlighted"</span>), forState: <span class="hljs-type">UIControlState</span>.<span class="hljs-type">Highlighted</span>)
        <span class="hljs-comment">// 4.添加监听</span>
        button.addTarget(<span class="hljs-keyword">self</span>, action: <span class="hljs-string">"composetBtnClick"</span>, forControlEvents: <span class="hljs-type">UIControlEvents</span>.<span class="hljs-type">TouchUpInside</span>)
        <span class="hljs-comment">// 5.添加到tabBar上</span>
        <span class="hljs-comment">// Swift中能不写self就不写self, 在闭包中必须写self</span>
        <span class="hljs-keyword">self</span>.tabBar.addSubview(button)
        <span class="hljs-comment">// 6.返回按钮</span>
        <span class="hljs-keyword">return</span> button
    }()

    <span class="hljs-comment">//  运行循环监听到事件后，向 VC 发送消息，动态执行 方法，因此不能设置为 private</span>
    <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">composetBtnClick</span><span class="hljs-params">()</span>
    </span>{
        <span class="hljs-built_in">print</span>(<span class="hljs-keyword">__FUNCTION__</span>)
    }
</code></pre>
<blockquote>
<p>注意：<code>composetBtnClick</code> 函数不能使用 <code>private</code> 修饰，因为当系统监听到按钮点击事件时，会给控制器发送 <code>composetBtnClick</code> 消息，如果设置成私有函数</p>
</blockquote>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="./variablestype.html" class="navigation navigation-prev " aria-label="Previous page: 变量类型推导"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="./createproject-04-summary.html" class="navigation navigation-next " aria-label="Next page: 阶段性小结"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="gitbook/app.js"></script>

    
    <script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    

    
    <script src="gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
